<template>
	<el-dialog title="图片裁剪" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
		<el-row :gutter="20">
			<el-col :span="16">
				<div style="height: 600px">
					<!-- <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixedBox="option.fixedBox"
        @realTime="realTime"
        :fixed="option.fixed"
        :fixedNumber="fixedNumber"
      ></vueCropper> -->
					<vue-cropper
						autoCrop
						ref="cropper"
						:img="option.img"
						:outputType="option.outputType"
						:autoCropWidth="option.autoCropWidth"
						:autoCropHeight="option.autoCropHeight"
						:fixed="option.fixed"
						:fixedNumber="option.fixedNumber"
						@realTime="realTime"
						centerBox
					/>
				</div>
			</el-col>
			<el-col :span="8" class="cropper-set" v-if="previews && previews.hasOwnProperty('img')">
				<!-- 图片预览 -->
				<div class="show-preview" :style="previewStyle">
					<div :style="previews.div" class="preview">
						<img :src="previews.url" :style="previews.img" />
					</div>
				</div>
				<!-- 图片放缩旋转 -->
				<div class="cropper-btns">
					<p>操作</p>
					<el-button size="medium" type="primary" icon="el-icon-zoom-in" @click="changeScale(2)"></el-button>
					<el-button size="medium" type="primary" icon="el-icon-zoom-out" @click="changeScale(-2)"></el-button>
					<el-button size="medium" type="primary" icon="el-icon-refresh-left" @click="rotateLeft"></el-button>
					<el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="rotateRight"></el-button>
				</div>
			</el-col>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="getCropData">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
export default {
	data() {
		return {
			dialogVisible: false,
			previews: '',
			option: {
				img: '', // 裁剪图片的地址  (默认：空)
				size: 1, // 裁剪生成图片的质量  (默认:1)
				full: true, // 是否输出原图比例的截图 选true生成的图片会非常大  (默认:false)
				outputType: 'png', // 裁剪生成图片的格式  (默认:jpg)
				canMove: true, // 上传图片是否可以移动  (默认:true)
				original: false, // 上传图片按照原始比例渲染  (默认:false)
				canMoveBox: true, // 截图框能否拖动  (默认:true)
				autoCrop: true, // 是否默认生成截图框  (默认:false)
				autoCropWidth: 370, // 默认生成截图框宽度  (默认:80%)
				autoCropHeight: 222, // 默认生成截图框高度  (默认:80%)
				fixedBox: false, // 固定截图框大小 不允许改变  (默认:false)
				fixed: true, // 是否开启截图框宽高固定比例  (默认:true)
				fixedNumber: [1, 0.6] // 截图框比例  (默认:[1:1])
			},
			previewStyle: {
				width: '100%',
				height: '400px',
				overflow: 'hidden',
				display: 'flex',
				'align-items': 'center'
			}
		};
	},
	props: ['props'],
	mounted() {
		this.option.fixedNumber = (() => {
			switch (this.props.type) {
				case 1:
					return [1, 0.6];
					break;
				case 2:
					return [1, 1.4];
					break;
				case 3:
					return [1, 1];
					break;
				case 4:
					return [5, 7];
					break;
				default:
					return [1, 1];
					break;
			}
		})();
		console.log(this.option.fixedNumber);
		this.$bus.$on('showCropperDialog', (v) => {
			if (v.indexOf('http') == -1) {
				this.option.img = v;
				this.dialogVisible = true;
			} else {
				this.warnMsg('图片格式不支持裁切');
			}
			return;
		});
	},
	beforeDestroy() {
		this.$bus.$off('showCropperDialog');
	},
	methods: {
		// 裁切
		getCropData() {
			this.$refs.cropper.getCropData((data) => {
				this.$emit('e-emit', data);
				this.dialogVisible = false;
			});
		},
		changeScale(num) {
			// 图片缩放
			num = num || 1;
			this.$refs.cropper.changeScale(num);
		},
		rotateLeft() {
			// 向左旋转
			this.$refs.cropper.rotateLeft();
		},
		rotateRight() {
			// 向右旋转
			this.$refs.cropper.rotateRight();
		},
		realTime(data) {
			// 实时预览
			this.previews = data;
		}
	}
};
</script>
<style scoped lang="scss">
.cropper-set {
	p {
		line-height: 2;
	}
}
.show-preview {
	flex: 1;
	-webkit-flex: 1;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	overflow: hidden;
	border: 1px solid #ddd;
	background-color: #fafafa;
	border-radius: 5px;
}
.preview {
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid #eee;
}
</style>
